<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>4-6 非父子组件通信-mitt</title>
</head>
<body>
<div id="app">
    <component-a></component-a>
    <component-b></component-b>
</div>
<script src="../lib/vue.global.js" type="text/javascript"></script>
<script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script>
<script>
    const emitter = new mitt()
    const componentA = {
      data() {
        return {
            str: 'A',
            infoFromB: ''
        }
      },
      template: `
      <div>
      <span>i am {{ str }}, </span>
      <span>this is info from B: {{ infoFromB }}</span>
      </div>`,
      mounted() {
        emitter.on('eventBusEvent', (data) => {
          console.log('eventBusEvent on')
          this.infoFromB = data
        })
      }
    }
    const componentB = {
      data() {
        return {
          str: 'B',
          infoToA: 'AAAAA'
        }
      },
      methods: {
        clickCallback() {
          console.log('eventBusEvent emit')
          emitter.emit('eventBusEvent', this.infoToA)
        }
      },
      template: `
      <div>
      <span>i am {{ str }}, </span>
      <span>this is info to A: {{ infoToA }}</span>
      <button @click="clickCallback">给A发消息</button>
      </div>`
    }
    const { createApp } = Vue
    const vm = createApp({
      data() {
        return {}
      },
      components: {
        'component-a': componentA,
        'component-b': componentB
      }
    }).mount('#app')

</script>
</body>
</html>
